
<!DOCTYPE html>

<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			table {
				background-color: skyblue;
				color: white;
				margin: 0 auto;
			}
			
			td {
				height: 100px;
				width: 100px;
				text-align: center;
			}
			
			td:hover {
				color: #999999;
				background-color: royalblue;
				cursor: pointer;
				font-size: 40px;
				color: black;
				box-shadow: 0 0 50px orange inset;
			}
			
			td.last {
				color: #black;
				background-color: gainsboro;
			}
			
			td.next {
				color: #black;
				background-color: gainsboro;
			}
			
			td.tian {
				color: #black;
				background-color: skyblue;
			}
			
			td.next:hover {
				color: red;
				background-color: burlywood;
				cursor: pointer;
			}
			
			th {
				line-height: 50px;
			}
			
		</style>
	</head>

	<body>
		
		
		<div id="box"></div>
		<script type="text/javascript">
			/**
			 * 判断某月有多少天
			 * @param {Number} year
			 * @param {Number} month
			 */
			function getDaysInOneMonth(year, month) {
				var d = new Date(year, month, 0);
				return d.getDate();
			}
			/**
			 * 判断1900年到nian上一年总共有多少天
			 * @param {Object} nian 当前年
			 */
			function lsunmnianyueday(nian) {
				var sumday = 0;
				for(n = 1900; n < nian; n++) {
					sumday += isrun(n) ? 366 : 365;
				}
				return sumday;
			}
			/***
			 * 判断当nian年到当yue月上一月最后一天有多少天
			 * @param {Object} nian 当前年
			 * @param {Object} yue   当前月
			 */
			function lsumyueday(nian, yue) {
				var sumday = 0
				for(y = 1; y < yue; y++) {
					sumday += getDaysInOneMonth(nian, y); //判断月的天数
					sumday += day;
				}
				return sumday;
			}
			/**
			 * 判断某一天是星期几
			 * @param {Number} year
			 * @param {Number} month 注意month要减一
			 * @param {Number} day
			 */
			function xinqi(year, month, day) {
				var d = new Date(year, month, day);
				return d.getDay();
			}
			//打印日历
			function wannianli(nian, yue) {
				var html = '';
				html += '<table cellpadding="0" cellspacing="0">';
				var day = getDaysInOneMonth(nian, yue);
				html += '<tr><th colspan="7"><div id="time"></div></th></tr>';
			html += '<tr><th colspan="7">' + nian + '年' + yue + '月' + '总共' + day + '天' + '</th></tr>';

				html += '<tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>';
				html += '<tr>';
				var ly = yue - 1;
				var lastday = getDaysInOneMonth(nian, ly);
				var day1 = xinqi(nian, ly ,1);
				for(var i = (lastday - day1 + 1); i <= lastday; i++) {
					html += '<td class="last">' + i + '</td>';
				}
				for(var i = 1; i <= day; i++) {
					if((i + day1 - 1) % 7 == 0 && i != 1) {
						html += '<tr>';
					}
					html += '<td class="tian">' + i + '</td>';
					if((i + day1 - 1) % 7 == 6) {
						html += '</tr>';
					}
				}
				var day31 = (day1 + day - 1) % 7;
				for(var a = 1; a < 7 - day31; a++) {
					html += '<td class="next">' + a + '</td>';
					if(a == 6 - day31) {
						html += '</tr>';
					}
				}
				html += '</table>'
				document.getElementById('box').innerHTML = html;
			}

			(function() {
				var nian = new Date().getFullYear();
				var yue = new Date().getMonth() + 1;
				wannianli(nian, yue);
				window.onkeydown = function(event) {
					switch(event.keyCode) {
						case 37:
							nian--;
							break;
						case 38:
							yue == 12 ? (yue = 1,nian++) : yue++;
							break;
						case 39:
							nian++;
							break;
						case 40:
							yue == 1 ? (yue = 12,nian--) : yue--;
							break;
						default:
							break;
					}
					wannianli(nian, yue);
				}
			})();
			function checkWeek(week){
				var wk="";
				switch (week){
					case 0:
					wk="星期日";
						break;
						case 1:
						wk="星期一";
						break;
						case 2:
						wk="星期二";
						break;
						case 3:
						wk="星期三";
						break;
						case 4:
						wk="星期四";
						break;
						case 5:
						wk="星期五";
						break;
					default:
					wk="星期六";
						break;
				}
				return wk;
			}

			setInterval(function() {
				var time = new Date();
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				month = check(month);
				var nowday = time.getDate();
				nowday = check(nowday);
				var hours = time.getHours();
				hours = check(hours);
				var minutes = time.getMinutes();
				minutes = check(minutes);
				var second = time.getSeconds();
				second = check(second);
				var week = time.getDay();
				
				var wk = checkWeek(week);
				var str = +year + "年" + month + "月" + nowday + "日" + " " + hours + ":" + minutes + ":" + second + " " + wk;
				document.getElementById("time").innerHTML = str;
			}, 1);
			function check(n) {
				var st = "";
				if(n < 10) {
					st = "0" + n;
				} else {
					st = n;
				}
				return st;
			}
		</script>
	</body>

</html>